/**
* @Author: zmx
* @Date: 2023/9/26
* @Description:
*/
<template>
  <el-dialog :title="'设备故障详情'" :visible.sync="show" append-to-body width="50%" :before-close="handleClose">
    <el-form :model="formInline">
      <el-row>
        <el-col :span="12">
          <el-form-item label="设备名称：">
            <span v-if="formInline.type === 'detail'">{{formInline.model.deviceName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="设备类型：">
            <span v-if="formInline.type === 'detail'">{{formInline.model.deviceType}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="故障名称：">
            <span v-if="formInline.type === 'detail'">{{formInline.model.faultName}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="故障类型：">
            <span v-if="formInline.type === 'detail'">{{formInline.model.faultType}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="故障代码：">
            <span v-if="formInline.type === 'detail'">{{formInline.model.faultCode}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="生产厂家：">
            <span v-if="formInline.type === 'detail'">{{formInline.model.deviceFactory}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="故障开始时间：">
            <span v-if="formInline.type === 'detail'">{{formatTime(formInline.model.faultStartTime)}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="故障等级：">
            <span v-if="formInline.type === 'detail'">{{formInline.model.faultValue}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="故障结束时间：">
            <span v-if="formInline.type === 'detail'">{{formatTime(formInline.model.faultEndTime)}}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="故障持续时间：">
            <span v-if="formInline.type === 'detail'">{{(formInline.model.faultDurationTime / 3600).toFixed(2)}}</span>
            <span>小时</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="故障原因：">
            <span v-if="formInline.type === 'detail'">{{formInline.model.faultReason}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="解决方案：">
            <span v-if="formInline.type === 'detail'">{{formInline.model.faultSolvePlan}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="标记为：">
            <el-select
              v-model="formInline.model.treatStatus"
              value-key="id"
              placeholder="选择解决状态"
              filterable
              clearable
            >
              <el-option
                v-for="item in optionsStatus"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item>
            <el-button class="common-btn" @click="showHistory()">查看历史故障详情</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="checkBtn">确 认</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {formatDate} from "@/utils/DateFormat"
import {patchTreatDetail} from "../../../../api/fault";

export default {
  props: ['ModelDialogShow', 'modelParam'], //接受父组件传递过来的数据
  data() {
    return {
      show: false, //弹窗默认隐藏
      formInline: {},
      titleFront: '查看',
      optionsStatus: [
        {
          'id': 0,
          "name": "未解决"
        },
        {
          'id': 1,
          "name": "已解决"
        },
      ]
    };
  },
  mounted() {
    this.formInline = JSON.parse(JSON.stringify(this.modelParam))
    this.getInit()
    //显示弹窗
    if (this.formInline.type === 'add') {
      this.titleFront = '新建'
    } else if (this.formInline.type === 'edit') {
      this.titleFront = '编辑'
    }
    this.show = this.ModelDialogShow
  },
  methods: {
    formatTime(date) {
      return formatDate("YYYY-mm-dd HH:MM:SS", date)
    },
    handleClose() {
      //关闭弹窗
      this.show = false
      this.$emit('closeDialog')
    },
    showHistory() {
      this.$emit('showHistoryDialog', this.formInline.model)
    },
    checkBtn() {
      patchTreatDetail({"id": this.formInline.modelId, "treatStatus": this.formInline.model.treatStatus}).then((res) => {
        //确定按钮
        this.$emit('refresh')
        this.handleClose()
      })
    },
    async getInit() {
    }
  }
};
</script>

<style scoped>

</style>
